<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">

        <el-form-item>
            <el-input v-model="formData.ioId" placeholder="请输入入库单关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="185" />
        <el-table-column prop="ioDate" label="入库日期" width="120" />
        <el-table-column prop="wperson" label="入库人" width="120" />
        <el-table-column prop="poId" label="关联采购单" width="120" />
        <el-table-column prop="brief" label="备注" width="150" />
        <el-table-column prop="lastUpdateBy" label="最近更新人" width="120" :formatter="formatter" />
        <el-table-column prop="lastUpdateTime" label="时间" width="180" :formatter="formatter" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="primary" size="small" @click="showDetail(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="pageChange" />
    <el-drawer v-model="drawer" title="入库单明细" :direction="ltr" size="90%">
        <el-table :data="tableDate2" style="width: 100%" ref="productTableRef">
            <el-table-column fixed prop="productId" label="ID" width="80" />
            <el-table-column fixed prop="productName" label="名称" width="200" />
            <el-table-column prop="qty" label="数量" width="120">
            </el-table-column>
            <el-table-column prop="brief" label="备注" width="150">
            </el-table-column>
            <el-table-column prop="shelfId" label="库位" width="200">
                <template #default="scope">
                    <ShelfTree v-model="scope.row.shelfId" :disabled="true"></ShelfTree>
                </template>
            </el-table-column>
            <el-table-column  prop="productionDate" label="生产日期" width="200">
                
            </el-table-column>
            <el-table-column  prop="expirationDay " label="保质期" width="150">
                <template #default="scope">
                    {{scope.row.expirationDay}}天
                </template>
            </el-table-column>
            <el-table-column  prop="brief2" label="入库备注" width="150">
            </el-table-column>
        </el-table>
    </el-drawer>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { ioApi } from '@/api'
import ShelfTree from '@/components/ShelfTree.vue'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const drawer = ref(false)
const tableData = ref([])
const tableDate2 = ref([])
const show = (row: any) => {
    drawer.value = true
    ioApi.selectItem.call({ioId:row.id}).then((res:any)=>{
        tableDate2.value = res
    })
}
const vendorData = ref([])
const categoryData = ref([
    {
        value: 0,
        label: '一级分类',
    }
])

const pageData = reactive({
    total: 0,
    pageSize: 3,
    pageNum: 1
})
const formData = reactive({
    ioId: ''
})
onMounted(() => {
    callIOApi()
})

const formatter = (row, column, cellValue, index) => {
    if (column.property == "lastUpdateTime") {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
    }
    if (column.property == "lastUpdateBy") {
        return cellValue + " 先生"
    }
}
const pageChange = (val: number) => {
    pageData.pageNum = val
    callIOApi()
}

const callIOApi = () => {
    let ioId = formData.ioId != "" ? formData.ioId : undefined
    let pageNum = pageData.pageNum
    let pageSize = pageData.pageSize
    ioApi.select.call({ id: ioId, pageNum, pageSize }).then((res: any) => {
        pageData.total = res.total
        tableData.value = res.items
    })
}
const onQuery = () => {
    callIOApi()
}
</script>